<template>
  <div style="background-color: #777; overflow: auto">
    <div style="position: absolute; top: 50vh, text-align: center">
      加载书籍中...
    </div>
    <ul
      style="list-style: none; margin: 0; padding: 0"
      v-infinite-scroll="load"
      infinite-scroll-disabled="noMore"
      infinite-scroll-delay="1000"
    >
      <li v-for="i in loadPages" :key="i">
        <VuePdf style="z-index: 1" :page="i" :src="src" />
      </li>
    </ul>
  </div>
</template>

<script>
/* eslint-disable */
import VuePdf from 'vue-pdf';
const pdfResourceUrl =
  'https://learningbay-20200428.oss-cn-shanghai.aliyuncs.com/fdu20cs/%E5%AE%B6%E7%9A%84%E8%AE%B0%E5%BF%86%20%E5%9B%BD%E7%9A%84%E6%83%85%E6%80%80%E2%80%94%E2%80%94%E5%AE%8B%E5%BA%86%E9%BE%84%E6%96%87%E7%89%A9%E6%95%85%E4%BA%8B%E6%B1%87%E7%BC%96.pdf';
export default {
  data: () => ({
    src: undefined,
    numPages: undefined,
    loadPages: undefined,
  }),
  created() {
    this.src = VuePdf.createLoadingTask(pdfResourceUrl);
  },
  mounted() {
    this.src.promise.then((pdf) => {
      this.numPages = pdf.numPages;
      this.loadPages = Math.min(this.numPages, 5);
    });
  },
  methods: {
    load() {
      this.loadPages += 3;
      this.loadPages = Math.min(this.loadPages, this.numPages);
    },
  },
  computed: {
    noMore() {
      return this.loadPages >= this.numPages;
    },
  },
  components: { VuePdf },
};
</script>
<style>
</style>
